<template>
  <div class="videoPromotion">
    <!-- 默认样式 -->
    <section v-show="!datas.imageList || !datas.imageList[0]" class="defaultcommodity">
      <div v-for="index in 2" :key="index + 1" class="defaultcommodityList" v-show="datas.commodityType === 0">
        <div class="vpimg">
          <div class="imgtop">
            <img draggable="false" src="../../../assets/images/imgs.png" alt="" />
          </div>
          <div class="jiaobiao">
            <img draggable="false" src="../../../assets/images/jiaobiao.png" alt="" />
          </div>
        </div>
        <div class="vptext">
          <p>这里显示名称</p>
          <div class="xszk">限时体验</div>
        </div>
        <div class="vpbottom">
          <div class="vpbottomleft">
            <!-- <p>￥29.9</p> -->
            <span>这里显示描述,最多显示两行</span>
          </div>
          <div class="vpbottomright">
            1元领取
            <!-- <img draggable="false" src="../../../assets/images/ICON-VIP.png" alt="" /> -->
          </div>
        </div>
      </div>
      <div class="defaultcommodityList" v-show="datas.commodityType === 1">
        <div class="vpimg">
          <div class="imgtop">
            <img draggable="false" src="../../../assets/images/imgs.png" alt="" />
          </div>
          <div class="jiaobiao">
            <img draggable="false" src="../../../assets/images/jiaobiao.png" alt="" />
          </div>
        </div>
        <div class="videoconlist">
          <div class="contentlist" v-for="ind in 2" :key="ind + 2">
            <div class="imgss">
              <div class="imgtop">
                <img draggable="false" style="border-radius:8px;" src="../../../assets/images/imgs.png" alt="" />
              </div>
              <div class="dianz">
                <img src="../../../assets/images/play.png" alt="">
                <span>100万</span>
              </div>
              <div class="vipicon" v-show="datas.commodityType !== 0">
                <img src="../../../assets/images/jiaobiao.png" alt="">
              </div>
            </div>
            <div class="text">
              <!-- 名称 -->
              <h5>这里显示名称,最多显示2行</h5>
              <p>这里显示描述</p>
              <div class="botflag">
                <span>标签名称1</span>
                <span>标签名称2</span>
              </div>
              <div class="btntext">
                <p><span>￥</span>68.8</p>
                <div class="btnbuy">立即抢购</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 图文样式 -->
    <section v-show="datas.imageList" class="defaultcommodity">
      <div
        v-for="(item, index) in datas.imageList"
        :key="index"
        class="defaultcommodityList"
        v-show="datas.commodityType === 0">
        <div class="vpimg">
          <div class="imgtop">
            <video width="330" height="175" :src="item.videoUrl" :poster="item.vimgUrl" controls></video>
          </div>
          <div class="jiaobiao" v-show="item.isVipShow == 1">
            <img draggable="false" src="../../../assets/images/jiaobiao.png" alt="" />
          </div>
        </div>
        <div class="vptext">
          <p>{{ item.title }}</p>
          <div class="xszk">{{ item.flag }}</div>
        </div>
        <div class="vpbottom">
          <div class="vpbottomleft">
            <!-- <p>￥29.9</p> -->
            <span>{{ item.desc }}</span>
          </div>
          <div class="vpbottomright">
            {{ item.btnText }}
            <!-- <img draggable="false" src="../../../assets/images/ICON-VIP.png" alt="" /> -->
          </div>
        </div>
      </div>
      <div
        v-for="(item, index) in datas.imageList"
        :key="item + index"
        class="defaultcommodityList"
        v-show="datas.commodityType === 1">
        <div class="vpimg">
          <div class="imgtop">
            <video width="330" height="175" :src="item.videoUrl" :poster="item.vimgUrl" controls></video>
          </div>
          <div class="jiaobiao" v-show="item.isVipShow == 1">
            <img draggable="false" src="../../../assets/images/jiaobiao.png" alt="" />
          </div>
        </div>
        <div class="videoconlist">
          <div class="contentlist" v-for="(ite,ind) in item.list" :key="ite + ind">
            <div class="imgss">
              <div class="imgtop">
                <img draggable="false" style="border-radius:8px;" :src="ite.src" alt="" />
              </div>
              <div class="dianz">
                <img src="../../../assets/images/play.png" alt="">
                <span>{{ ite.courseNum }}万</span>
              </div>
              <div class="vipicon" v-show="ite.isVipShow === 1">
                <img src="../../../assets/images/jiaobiao.png" alt="">
              </div>
            </div>
            <div class="text">
              <!-- 名称 -->
              <h5>{{ ite.text }}</h5>
              <p>{{ ite.desc }}</p>
              <div class="botflag">
                <span v-for="(it, indx) in ite.flagTagsArr" :key="indx">{{ it }}</span>
              </div>
              <div class="btntext">
                <p v-show="ite.showPrice === 1"><span>￥</span>68.8</p>
                <div class="btnbuy">{{ ite.btnText }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>
<script>
export default {
  name: "VideoPromotion",
  props: {
    datas: Object,
  },
};
</script>
<style lang="scss" scoped>
.videoPromotion {
  position: relative;
  .defaultcommodity {
    box-sizing: border-box;
    margin: 1px;
    padding: 0 10px;
    .defaultcommodityList {
      width: 330px;
      // height: 316px;
      background: #ffffff;
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      margin-top: 20px;
      padding: 10px;
      .vpimg {
        position: relative;
        margin: 10px auto;
        .imgtop {
          // width: 311px;
          height: 175px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .jiaobiao {
          width: 24px;
          height: 16px;
          position: absolute;
          top: 0;
          right: 0;
          img {
            width: 100%;
          }
        }
      }
      .vptext {
        display: flex;
        align-items: center;
        p {
          font-size: 18px;
          font-weight: 500;
          color: #333333;
        }
        .xszk {
          // width: 64px;
          // height: 21px;
          // background: linear-gradient(180deg, #ff6c6c 0%, #ff4f4f 100%);
          // border-radius: 0px 8px 0px 8px;
          // font-size: 12px;
          // font-weight: 600;
          // color: #ffffff;
          // text-align: center;
          // line-height: 21px;
          // margin-left: 8px;
          width: 64px;
          height: 21px;
          background: linear-gradient(88deg, #FF5F49 0%, #FF9052 100%);
          border-radius: 3px;
          line-height: 21px;
          text-align: center;
          color: #ffffff;
          margin-left: 8px;
          font-size: 12px;
        }
      }
      .vpbottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        .vpbottomleft {
          display: flex;
          align-items: center;
          span {
            font-size: 14px;
            font-weight: 400;
            color: #666666;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
          // p {
          //   font-size: 16px;
          //   font-weight: bold;
          //   color: #000000;
          // }
        }
        .vpbottomright {
          width: 78px;
          height: 25px;
          background: linear-gradient(180deg, #FFEABB 0%, #FFBD59 100%);
          border-radius: 62px;
          line-height: 25px;
          text-align: center;
          color: #EE5757;
          font-size: 13px;
          font-weight: 500;
          // img {
          //   width: 100%;
          // }
        }
      }
      .videoconlist{
        .contentlist{
          display: flex;
          padding: 10px;
          .imgss {
            position: relative;
            margin-right: 10px;
            img {
              width: 120px;
              height: 120px;
            }
            .dianz{
              width: 60px;
              height: 25px;
              background: rgba(0,0,0,0.33);
              border-radius: 60px 60px 60px 60px;
              display:flex;
              align-items:center;
              padding:0 5px;
              margin-right:10px;
              margin-bottom:5px;
              position: absolute;
              right: 0px;
              bottom: 5px;
              img{
                width:16px;
                height:16px;
                display:block;
                margin-right:5px;
              }
              span{
                font-size:12px;
                color:#ffffff;
              }
            }
            .vipicon{
              position: absolute;
              right: 0;
              top: 0;
              width: 24px;
              height: 18px;
              img{
                width: 100%;
                height: 100%;
                border-top-right-radius: 8px;
              }
            }
          }
          .botflag{
            display: flex;
            align-items: center;
            margin: 10px 0;
            span{
              width: 53px;
              height: 16px;
              background: #EAEAEA;
              border-radius: 10px;
              display: block;
              text-align: center;
              line-height: 16px;
              margin-right: 6px;
              font-size: 12px;
              font-family: PingFang SC-Regular, PingFang SC;
              font-weight: 400;
              color: #808080;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
              padding: 3px 5px;
            }
          }
          .text {
            width: 100%;
            h5{
              font-size: 14px;
              -webkit-margin-before: 0; 
              -webkit-margin-after: 0;
              line-height: 30px;
            }
            p{
              font-size: 12px;
              -webkit-margin-before: 0; 
              -webkit-margin-after: 0; 
            }
          }
          .btntext{
            display: flex;
            justify-content: space-between;
            align-items: center;
            p{
              font-size: 18px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #F35C6D;
              span{
                font-size: 14px;
              }
            }
            .btnbuy{
              width: 100px;
              height: 25px;
              background: linear-gradient(140deg, #FFA552 0%, #FF5757 100%);
              border-radius: 62px;
              text-align: center;
              line-height: 25px;
              font-size: 11px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #FFFFFF;
            }
          }
        }
      }
    }
  }
}
</style>
